import React, {useRef, useEffect, useState} from 'react'
import styles from '@styles/canvas.module.scss'

// 面向对象
class Rect {
  constructor(
    public x: number,
    public y: number,
    public w: number,
    public h: number,
    public color: string
  ){}
  // 更新
  upDate() {
    this.x ++
    if(this.x > 800) {
      this.x = -200
    }
  }
  // 渲染
  render(ctx: CanvasRenderingContext2D) {
    if(!ctx) return
    ctx.fillStyle = this.color
    ctx.fillRect(this.x, this.y, this.w, this.h)
  }
}


export default function Canvas() {
  const canvasRef = useRef<HTMLCanvasElement>(null)
  const canvasData = useRef<{
    intervalT: NodeJS.Timer|null;
    testNum: number;
  }>({
    intervalT: null,
    testNum: 0
  }) 
  // const [timeInterval, setTimeInterval] = useState<NodeJS.Timer|null>(null)
  const [a, setA] = useState(0)
  
  const myRect1: Rect = new Rect(-100, 80, 100, 50, 'purple')
  const myRect2: Rect = new Rect(-100, 150, 100, 50, 'pink')
  
  const handleStop = () => {
    // canvasData.current.intervalT && clearInterval(canvasData.current.intervalT)
    // setA(Math.random())
    if(canvasRef.current && canvasRef.current.getContext('2d')) {
      canvasStart(canvasRef.current.getContext('2d') as CanvasRenderingContext2D, true)
    }
    
  }
  const handleStart = () => {
    console.log(canvasData.current.intervalT)
    if(canvasRef.current && canvasRef.current.getContext('2d')) {
      canvasStart(canvasRef.current.getContext('2d') as CanvasRenderingContext2D)
    }
    // setA(Math.random())
  }

  const canvasStart = (
    ctx: CanvasRenderingContext2D, 
    // intervalT: NodeJS.Timer|null, 
    clear?: boolean
  ) => {
    let timeInterval: NodeJS.Timer|null = null;
    timeInterval && clearInterval(timeInterval)
    if(clear && timeInterval) {
      clearInterval(timeInterval)
      return
    }
    timeInterval = setInterval(() => {
      ctx.clearRect(0, 50, 800, 350)
      myRect1.upDate()
      myRect1.render(ctx)
      myRect2.upDate()
      myRect2.render(ctx)
    }, 10)
  }


  useEffect(() => {
    if(!canvasRef.current) return
    const myCanvas = canvasRef.current?.getContext('2d')
    if(!myCanvas) return
    
    // 设置颜色
    myCanvas.fillStyle = 'green'
    // 绘制矩形 x,y,w,h
    myCanvas.fillRect(100, 0, 200, 50)
    
    canvasData.current.intervalT = setInterval(() => {
      myCanvas.clearRect(0, 50, 800, 350)
      myRect1.upDate()
      myRect1.render(myCanvas)
      myRect2.upDate()
      myRect2.render(myCanvas)
    }, 10)

    // canvasStart(myCanvas)
    return () => {
      canvasData.current.intervalT && clearInterval(canvasData.current.intervalT)
      // canvasStart(myCanvas, true)
    }
  }, [])
  console.log(canvasData.current)
  return (
    <div className={styles.wrap}>
      <div>Canvas learn</div>
      <div className={styles.canvas_operate}>
        <span onClick={handleStop}>停止</span>
        <span onClick={handleStart}>开始</span>
        <span onClick={() => {
          canvasData.current.testNum++
          setA(Math.random())
        }}>测试</span>
      </div>
      <canvas 
        width="900" height="400"
        ref={canvasRef}
        className={styles.canvas_wrap} 
      >
        当前的浏览器版本不支持，请升级浏览器
      </canvas>

    </div>
  )
}
